<template>
  <div>
    <el-dialog
      title="新增接警人"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      top="10vh"
    >
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="90px">
        <el-form-item size="small" label="姓名" prop="name">
          <el-input
            clearable
            placeholder="请输入"
            maxlength="20"
            v-model.trim="addForm.name"
          >
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="手机号" prop="mobile">
          <el-input
            oninput="value=value.replace(/[^\d]/g,'')"
            @blur="addForm.mobile = $event.target.value"
            clearable
            placeholder="请输入"
            maxlength="11"
            v-model.trim="addForm.mobile"
          >
          </el-input>
        </el-form-item>

        <el-form-item size="small" label="接警人级别" prop="level">
          <el-select
            v-model="addForm.level"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in levelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="通知方式" prop="notifyType">
          <el-checkbox-group v-model="addForm.notifyType">
            <el-checkbox label="语音" text-color="#ff00ff"></el-checkbox>
            <el-checkbox label="短信"></el-checkbox>
            <el-checkbox label="公众号"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="tip">
          <div class="title"><span style="color: red">* </span>温馨提示：</div>
          <span class="txt"
            >1.请输入姓名和手机号，同时确保此用户的姓名和手机号已登记和关联到系统中的单位。</span
          >
          <span class="txt">2.请确保填写的报警号码正确有效。</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqAlarmReceiverAdd } from "@/api/api";
// import rulesMixin from "../mixins/rules.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";
import { validMobile, validSpaceSpecialCharEmoji } from "@utils/validate";

export default {
  mixins: [loadMore],
  data() {
    return {
      dialogVisible: false,
      addForm: {
        buildId: "",
        floorId: "",
        spaceId: "",
        name: "",
        mobile: "",
        notifyType: [],
        level: "",
      },
      levelList: [
        {
          id: 1,
          name: "一级",
        },
        {
          id: 2,
          name: "二级",
        },
        {
          id: 3,
          name: "三级",
        },
        {
          id: 4,
          name: "四级",
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            validator: validSpaceSpecialCharEmoji,
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur",
          },
          {
            validator: validMobile,
          },
        ],
      },
    };
  },
  computed: { ...mapState(["user", "spacesManage"]) },
  mounted() {},
  methods: {
    // 点击确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let { spaceId, name, mobile, notifyType, level } = this.addForm;
        if (this.addForm.spaceId == "" && this.addForm.floorId == "") {
          spaceId = this.addForm.buildId;
        } else if (this.addForm.spaceId == "") {
          spaceId = this.addForm.floorId;
        }
        let mobileReceive = notifyType.indexOf("语音") !== -1 ? 1 : 0;
        let msgReceive = notifyType.indexOf("短信") !== -1 ? 1 : 0;
        let mpReceive = notifyType.indexOf("公众号") !== -1 ? 1 : 0;
        // console.log(notifyType);
        // console.log(mobileReceive);
        // console.log(msgReceive);
        // console.log(mpReceive);
        let params = {
          orgId: this.spacesManage.spInfo.orgId,
          spaceId: this.spacesManage.spInfo.id,
          name,
          mobile,
          mobileReceive,
          msgReceive,
          mpReceive,
          level,
        };
        this.reqAddFun(params);
      });
    },
    // 接口请求
    async reqAddFun(params) {
      const res = await reqAlarmReceiverAdd(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("新增成功");
      // this.$parent.getDataList(this.spacesManage.spInfo);
      if (this.addForm.level != "") {
        this.$emit("getDataList", this.spacesManage.spInfo);
      }
      this.closeDialog();
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.dialogVisible = false;
    },
  },
  deactivated() {
    if(this.$refs.refForm!=null){
      this.closeDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

.tip {
  width: 98%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  .title {
    color: @primaryTxtcolor;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .txt {
    width: 96%;
    font-size: 11px;
    // color: @primaryTxtcolor;
    color: #999;
    line-height: 24px;
    margin-left: 10px;
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #7367f0 !important;
  border: 1px solid #7367f0 !important;
}

::v-deep .el-checkbox__inner:hover {
  border-color: #7367f0;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #7367f0;
}

::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #7367f0 !important;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 2016;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束
</style>